<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/newsContent.css">
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="js/common.js"></script>

    <script>
        $(function () {
            //获取地址栏日报id
            var params = getParams();
            if (params.id) {//有值
                //获取某一日报的日报内容
                $.get("/newsPages/" + params.id + "/comtents", function (data) {
                    console.log(data);
                    //渲染文章内容
                    $(".newsContent").renderValues(data);
                });
            }
            /*====================收藏======================*/

            var user = JSON.parse(sessionStorage.getItem("user"));
            var userId;
            if (!user) {
                userId = null;
            } else {
                userId = user.id;
            }
            var type = $("#collectBtn").data("type");

            //回显该文章的被收藏数量
            $.get("/collect/count", {contentId: params.id, type: type}, function (data) {
                $("#collectBtn").html(data.count);
            })

            //回显收藏
            $.get("/collect/select", {userId: userId, contentId: params.id, type: type}, function (data) {
                if (data.success) {
                    console.log("收藏了,回显实心");
                    $("#collectBtn").removeClass("fa-star-o").addClass("fa-star")
                } else {
                    console.log("没收藏,回显空心");
                    $("#collectBtn").removeClass("fa-star").addClass("fa-star-o")
                }
            })

            //收藏的星星按钮绑定点击事件(收藏/取消收藏)
            $("#collectBtn").click(function () {
                //获取当前文章的收藏数
                var count = $("#collectBtn").html();
                //验证是否登录了
                if (!user) {
                    //没登录就弹提示框确认是否跳转登录
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '请登陆后再执行相关操作!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html"
                        }
                    });
                } else {
                    //登录了就发送请求进行处理
                    $.get("/collect", {userId: userId, contentId: params.id, type: type}, function (data) {
                        if (data.success) {
                            console.log("设置收藏");
                            //设置收藏,回显实心
                            $("#collectBtn").removeClass("fa-star-o").addClass("fa-star")
                            $("#collectBtn").html(count * 1 + 1);
                        } else {
                            console.log("取消收藏");
                            //取消收藏,回显空心
                            $("#collectBtn").removeClass("fa-star").addClass("fa-star-o")
                            $("#collectBtn").html(count - 1);
                        }
                    })
                }
            })
            /*==============================点赞======================================*/
            type = $("#likeBtn").data("type");

            //回显该文章的被点赞数量
            $.get("/dogood/count", {contentId: params.id, type: type}, function (data) {
                $("#likeBtn span").html(data.count);
            })
            //回显点赞
            $.get("/dogood/select", {userId: userId, contentId: params.id, type: type}, function (data) {
                if (data.success) {
                    console.log("点赞了,回显实心拇指");
                    $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                } else {
                    console.log("没点赞,回显空心拇指");
                    $("#likeBtn").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")
                }
            })
            //点赞的拇指按钮绑定点击事件(点赞/取消点赞)
            $("#likeBtn").click(function () {
                //获取当前文章的收藏数
                var count = $("#likeBtn span").html();
                //验证是否登录了
                if (!user) {
                    //没登录就弹提示框确认是否跳转登录
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '请登陆后再执行相关操作!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html"
                        }
                    });
                } else {
                    //登录了就发送请求进行处理
                    $.get("/dogood", {userId: userId, contentId: params.id, type: type}, function (data) {
                        if (data.success) {
                            console.log("设置点赞");
                            //设置点赞,回显实心拇指
                            $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                            $("#likeBtn span").html(count * 1 + 1);
                        } else {
                            console.log("取消收藏");
                            //取消点赞,回显空心拇指
                            $("#likeBtn").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")
                            $("#likeBtn span").html(count - 1);
                        }
                    })
                }
            })



            var currentPage = 1;
            //总页数  用来判断是否是最后一页
            var pages ;
            //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
            var travelData = [];
            //变量表示查询状态 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
            var loading = false;
            //获取页面带过来的参数
            var params = getParams();

            function query() {
                //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                if (loading) {
                    return;
                }
                //每次在发送ajax前,将查询状态改为正在查询,
                loading = true;
                $.get('/comments/strategy', {type: 3, answer_id: params.id, currentPage: currentPage,pageSize:4}, function (data) {

                    //将查询出来的需要的数据的数组放到容器中
                    $.merge(travelData, data.list);

                    //渲染数据
                    $("#display").renderValues({list: travelData}, {
                        'getReplyId': function (item, value) {
                            $(item).attr('data-id', value);
                        },
                        getId: function (item, value) {
                            $(item).attr("data-id", value);
                        },
                        'getCommentId': function (item, value) {
                            $(item).attr('data-id', value);
                        },

                        'getTargetId': function (item, value) {
                            $(item).attr('data-id', value);
                        }
                    });
                    //评论的点击
                    $(".CommentBtn").click(function () {
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            $("#CommentModal input").val("")
                            $("#CommentModal").modal('show')
                        }
                    });
                    //点击回复的点击
                    $(".reply_Bth").click(function () {
                        $("#ReplyModal input").val("")
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            //获取当前comment的id
                            var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                            console.log(commentId);
                            //设置回复人的id为当前登录的用户
                            $("#replyUserId").val(user.id);
                            //设置评论id
                            $("#commentId").val(commentId);
                            //设置目标人的id
                            var targetId = $(this).data("id");
                            console.log(targetId);
                            $("#targetUserId").val(targetId);


                            $("#ReplyModal").modal('show')
                        }
                    });
                    //点击回复人的昵称显示模态框进行回复
                    $(".replyUserNickName").click(function () {
                        $("#ReplyModal input").val("")
                        //如果登录了可以回复
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        }
                        console.log($(this));
                        //获取当前comment的id
                        var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                        console.log(commentId);
                        //设置回复人的id为当前登录的用户
                        $("#replyUserId").val(user.id);
                        //设置评论id
                        $("#commentId").val(commentId);
                        //设置目标人的id
                        var targetId = $(this).closest(".replydiv").find("a.replyUserNickName").data("id");
                        console.log(targetId);
                        $("#targetUserId").val(targetId);


                        $("#ReplyModal").modal("show");
                    });
                    //点击被回复人的昵称显示模态框进行回复
                    $(".targetUserNickName").click(function () {
                        $("#ReplyModal input").val("")
                        //如果登录了可以回复
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        }
                        //获取当前comment的id
                        var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                        console.log(commentId);
                        //设置回复人的id为当前登录的用户
                        $("#replyUserId").val(user.id);
                        //设置评论id
                        $("#commentId").val(commentId);
                        //设置目标人的id
                        var targetId = $(this).data("id");
                        console.log(targetId);
                        $("#targetUserId").val(targetId);


                        $("#ReplyModal").modal("show");
                    });

                    //当前页加1 下次将查询第二页数据
                    currentPage += 1;
                    //总页数
                    pages = data.pages;
                    //查询请求结果,则将查询状态改为 不在查询中
                    loading = false;
                })
            }

            //默认的第一次查第一页数据
            query();

            //给window绑定滚动事件,当window滚动式,调用其中的函数
            $(window).scroll(function () {
                //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                    if (currentPage <= pages) {
                        query();
                        //滚动到底部时,如果此时还有页数 弹出加载中信息
                        $(document).dialog({
                            type: 'notice',
                            infoText: '加载中',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    } else {
                        //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }

            });

            $(".strategyDetailSubmitBtn").click(function () {
                var content = $("#commentForm input[name='content']").val();
                $.post('/comments/strategy', {
                    'commenter.id': user.id,
                    answer_id: params.id,
                    type: 3,
                    content: content
                }, function (data) {
                    location.reload();
                });

            });

            $(".replyFormSubmitBtn").click(function () {
                $("#replyForm").ajaxSubmit(function (data) {
                    if (data.success) {
                        $(document).dialog({
                            type: 'alert',
                            closeBtnShow: false,
                            content: '评论成功',
                        })
                        setTimeout(function () {
                            location.reload();
                        }, 500);
                    }
                })

            });
            //浏览量查看(渲染中使用同步请求)
            //console.log(id);
            var id = params.id;
            $.ajax({
                url: "/newsPages/scanNumber",
                async: false,
                data:{id:id},
                success:function (data) {
                    //console.log($(item).find("span"));
                    $("#browseBtn").html(data);
                }
            })
            /**
             * 浏览量保存
             */
            /*$.post("/newsPages/number",{id:id},function (data) {
                //console.log(data);
            })*/

        })
    </script>

</head>

<body>
<div class="newsDetail">
    <div class="newsContent">
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverUrl">
        <div class="container">
            <div class="row typeRow">
                <div class="col-4" >
                    <img src="/images/lang.png">
                </div>
                <div class="col-4">
                </div>
                <div class="col-4">
                    <span class="type">叩叮狼出版</span>
                </div>
            </div>
            <div class="container d-flex">
                <div class="col-4">
                    <i class="fa fa-thumbs-o-up" id="likeBtn" data-type="3"><span></span></i>&nbsp;&nbsp;
                </div>
                <div class="col-4">
                    <i class="fa fa-star-o" id="collectBtn" data-type="3"> </i>&nbsp;&nbsp;
                </div>
                <div class="col-4">
                    <i class="fa fa-eye handleBtn" id="browseBtn" render-html="browseNum">490</i>
                </div>
            </div>
            <div class="detail">
                <h2 class="title" render-html="title"></h2>
                <div class="content" render-html="newsContent.content"></div>
            </div>
        </div>
    </div>
    <hr>



    <!--评论内容-->
    <!--评论-->
    <div id="display" class="container">
        <div render-loop="list"><!--快来发表你的评论吧-->
            <div class="row">
                <a data-href="/userProfiles.html?id=">
                    <img class="rounded-circle" render-src="list.commenter.headImgUrl" style="width: 40px;height: 40px">
                </a>
                <div class="col mysss">
                    <a render-key="list.id" render-fun="getCommentId" class="listComment">
                    </a>
                    <a style="font-size: 20px;color: #545b62" class="replyBtn" render-html="list.commenter.nickName"></a>
                    <span class="comment-date" render-html="list.createtime"></span>
                    <a class="reply_Bth oneReplyBtn" render-key="list.commenter.id" render-fun="getId">
                        回复
                    </a>
                    <p render-html="list.content"></p>

                    <!--二级评论-->
                    <div id="commentReply">
                        <div render-loop="list.commentOfAlls">
                            <div class="replydiv">
                                <a style="color: #545b62" class="replyUserNickName"
                                   render-html="list.commentOfAlls.replyer.nickName"
                                   render-key="list.commentOfAlls.replyer.id" render-fun="getReplyId">
                                </a>
                                回复:
                                <a style="color: #545b62" class="byreplyerrNickName targetUserNickName"
                                   render-html="list.commentOfAlls.byreplyerr.nickName"
                                   render-key="list.commentOfAlls.byreplyerr.id" render-fun="getTargetId">
                                </a>
                                <span class="comment-date" render-html="list.commentOfAlls.createtime"></span><br>
                                <span name="content" render-html="list.commentOfAlls.content"></span>
                            </div>
                        </div>
                    </div>
                    <hr/>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2 CommentBtn">
            <i class="fa fa-commenting-o"></i> 添加你的评论
        </div>
    </div>
</div>

<!--评论模态框-->
<div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" id="commentForm">
                    <input type="hidden" name="commenter.id"/><!--评论人Id-->
                    <input type="hidden" name="answer_id"/><!--评论的文章id-->
                    <input type="hidden" name="type"/><!--评论的类型-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary strategyDetailSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

<!--回复模态框-->
<div class="modal fade" id="ReplyModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">回复</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/comments/strategy/reply" method="post" id="replyForm">
                    <input type="hidden" id="replyUserId" name="replyer.id"/><!--评论人Id-->
                    <input type="hidden" id="targetUserId" name="byreplyerr.id"/><!--被评论人Id-->
                    <input type="hidden" id="commentId" name="comment_id"/><!--这条评论的id-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary replyFormSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>